<template>
  <div>
    <div class="activity" ref="activity">
      <!-- 头部 -->
      <nav-bar class="page-part" :bar-list="barList" :show-container="false"></nav-bar>
      <!-- 轮播图 -->
      <swipe :swipe-image="image" class="card-swipe"></swipe>
      <!-- 活动提醒 -->
      <div class="custom-remind">
        <div class="remind" @click="routerToGrab">
          <div class="title">抢兑活动</div>
          <div class="content">
            <span class="small-badge">{{grabInfo.display_time}}</span>
            <span class="desc">{{grabInfo.display_str}}</span>
          </div>
        </div>
        <div class="vertical-line"></div>
        <div class="report" @click="routerToGrab">
          <div class="move-up" ref="moveUp">
            <div class="record" v-for="(v, k) in recordList" :key="k">
              <span class="title border">{{v.bank_name}}</span>
              <span class="title">{{v.name}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="line" ref="actMenu"></div>
      <!-- <activity-card @reportRed="reportRed" ref="actcard"></activity-card> -->
      <div class="actvity-menu-bg">
        <div class="activity-menu" :class="{fixed: menuFix}">
          <!-- 中部菜单 -->
          <div class="sub-act-tab">
            <mt-navbar v-model="selected" class="mini-screen">
              <mt-tab-item v-for="(nav, index) in subTab" :id="nav.num" :key="index" class="navbar" @click.native="routerTo()">
                <mt-badge slot="icon" type="error" size="small" class="custom-badge" v-if="nav.badgeShow"></mt-badge>
                {{nav.title}}
              </mt-tab-item>
            </mt-navbar>
            <div class="screen" @click="showPopup">
              <img src="/src/assets/icons/menu-screen.png">
              <span>筛选</span>
            </div>
            <!-- 筛选popup -->
            <mt-popup v-model="popupVisible" position="right" @touchmove.prevent @scroll.prevent>
              <bank-filter 
                @childClosePopup="closePupup" 
                @openBankPopup="openBankPopup" 
                @optCheck="optCheck" 
                :weekdays="weekdays"
                :bank-list="bankList"
                ref="bankFilter"
              ></bank-filter>
            </mt-popup>
            <!-- 编辑我的银行popup -->
            <mt-popup v-model="bankPopup" position="right" @touchmove.prevent @scroll.prevent>
              <edit-bank
                @closeBankPopup="closeBankPopup" 
              ></edit-bank>
            </mt-popup>
          </div>
          <!-- slide-menu -->
          <div class="slide-menu">
            <div class="slide">
              <div class="scroll">
                <span 
                  v-for="(t, i) in tags" :key="i" 
                  :class="{on: options === t.val, badge: t.if_new}" 
                  @click="tabSelect(t.val)"
                >
                  {{t.name}}({{t.cnt}})
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 活动卡片 -->
      <!-- <div class="activity-card" ref="wrapper" :style="{height: wrapperHeight + 'px'}" @scroll="scrolls"> -->
      <div class="activity-card">
        <div class="nothing" v-if="actList.length === 0 && Number(selected) === 1">
          <a @click="openBankPopup">想要智能推荐吗？戳我添加银行吧:)</a>
        </div>
        <transition-group name="list" v-if="actList.length > 0">
          <div class="card-item list-item" 
            v-for="(val, key) in actList" :key="val.id" 
            @click="routerToDetail(val.id)"
            :class="{'is-new': val.is_new}" 
            >
            <div class="card-header">
              <img :src="val.bank_img">
              <span class="title">{{val.name}}</span>
              <!-- <span class="v-line"></span> -->
              <!-- <span class="title">{{val.card_no}}</span> -->
            </div>
            <div class="card-content">
              <div class="desc">({{val.begin_date}} - {{val.end_date}})</div>
              <div class="hint">{{val.brief_introduction}}</div>
            </div>
            <div class="card-footer">
              <div class="flex-item" v-if="!ifAttention" @click.stop="addManage(val.id, key)">
                <img src="/src/assets/icons/heart-gray.png" alt="未关注">
                <span>{{val.hot_level}}</span>
              </div>
              <div class="flex-item" v-if="ifAttention" @click.stop="removeManage(val.id, key)">
                <img src="/src/assets/icons/heart-red.png" alt="已关注">
                <span>{{val.hot_level}}</span>
              </div>
              <div class="flex-item">
                <span @click="proceedInfo(val.id, val.if_act_finished || val.if_cyc_finished, key, $event)" v-if="!showMeta">
                  <img :src="val.if_act_finished || val.if_cyc_finished ? '/src/assets/icons/circle-success.png' : '/src/assets/icons/circle.png'" alt="完成">
                  <span>{{val.complete_hint}}</span>
                </span>
                <img src="/src/assets/icons/trash.png" alt="移除" class="ml-12" v-if="showMeta" @click="addHate(val.id, key, $event)">
              </div>
            </div>
          </div>
        </transition-group>
      </div>
      <!-- 抽奖 -->
      <!-- <turn-table ref="turnTable"></turn-table> -->
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'
  import swipe from '@/components/swipe'
  import NavBar from './NavBar'
  // import ActivityCard from './ActivityCard'
  import BankFilter from './BankFilter'
  import EditBank from './EditBank'
  // import TurnTable from '@/container/other/CheckTurnTable'

  export default {
    name: 'Activity',
    components: {
      swipe,
      NavBar,
      // ActivityCard,
      BankFilter,
      EditBank
      // TurnTable
    },
    data () {
      return {
        barList: [
          {num: '1', title: '爆料列表', badgeShow: false, pathName: 'ReportList', iconClass: 'nav-report'},
          {num: '2', title: '我的爆料', badgeShow: false, pathName: 'MyReport', iconClass: 'nav-broke-news'},
          {num: '3', title: '补充活动', badgeShow: false, pathName: 'MyActivity', iconClass: 'nav-supply'}
        ],
        recordList: [],
        image: [],
        page: 1,
        limit: 10,
        nowPos: {},
        grabInfo: {},
        // 滑动
        startx: 0,
        starty: 0,
        scrollTop: 0,
        // 活动
        selected: this.$route.query.actS || '1',
        subTab: [
          {num: '1', title: '今日我的', badgeShow: false},
          {num: '2', title: '全部待入', badgeShow: false}
        ],
        ifAttention: this.$route.query.actS === '1' && true,
        // 筛选项
        weekdays: [],
        bankList: [],
        // 横滑选项
        tags: {},
        popupVisible: false,
        bankPopup: false,
        // 中部菜单
        menuFix: false,
        // 活动卡片
        actList: [],
        wrapperHeight: 0,
        showMeta: this.$route.query.actS === '2' || false,
        url: '',
        searchBanks: [],
        options: Number(this.$route.query.opt) || 100,
        actType: 0,
        myWeekday: this.$route.query.myWeekday || 0,
        allWeekday: this.$route.query.allWeekday || 0,
        actStatus: 0,
        // 窗口高度
        winHeight: document.documentElement.clientHeight,
        // 缓存
        windowScroll: 0
      }
    },
    methods: {
      routerToGrab () {
        this.$router.push({name: 'ActivityGrab', query: {time: this.grabInfo.display_time}})
      },
      reportRed (v) {
        this.barList[0].badgeShow = v
      },
      // 获取抢兑互动
      getGrabAct () {
        this.$post('/vue/activity/cur_grab_activity', '').then(data => {
          this.grabInfo = data
          this.recordList = data.act_list
          let moveUpHeight = this.recordList.length * 26 - 44
          moveUpHeight = moveUpHeight > 0 ? moveUpHeight : 0
          // 动态修改会导致播放抖动，建议写死
          document.styleSheets[document.styleSheets.length - 1].insertRule(`@keyframes moveUp{from{bottom:0px;}to{bottom:${moveUpHeight}px;}}`)
        })
      },
      // 活动卡片
      routerTo () {
        switch (Number(this.selected)) {
          case 1: // 我的活动
            this.url = '/vue/activity/my_list'
            this.page = 1
            this.showMeta = false
            this.ifAttention = true
            this.$nextTick(() => {
              this.$refs.bankFilter.tabSelect(Number(this.myWeekday))
            })
            break
          case 2: // 待入活动
            this.url = '/vue/activity/other_list'
            this.page = 1
            this.showMeta = true
            this.ifAttention = false
            this.$nextTick(() => {
              this.$refs.bankFilter.tabSelect(Number(this.allWeekday))
            })
            break
        }
        this.getActList()
        // 浅拷贝
        let query = {}
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {actS: this.selected})
        this.$router.replace({query: query})
      },
      optCheck (field, val) {
        this[field] = val
        let tmp = {}
        tmp[field] = val
        // 浅拷贝
        let query = {}
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, tmp)
        this.$router.replace({query: query})
      },
      tabSelect (i) {
        this.options = Number(i)
        this.getActList()
        // 浅拷贝
        let query = {}
        for (let i in this.$route.query) {
          query[i] = this.$route.query[i]
        }
        Object.assign(query, {opt: Number(i)})
        this.$router.replace({query: query})
      },
      showPopup () {
        this.popupVisible = true
      },
      closePupup (action) {
        this.popupVisible = false
        if (action) {
          this.getActList()
        }
      },
      openBankPopup () {
        this.bankPopup = true
      },
      closeBankPopup () {
        this.bankPopup = false
      },
      dataModify (key, val) {
        this[key] = val
        this.getActList()
      },
      getTags () {
        this.$post('/vue/activity/get_tags', '').then(data => {
          // 横滑标签
          this.tags = data.options
          // 7天列表
          this.weekdays = data.weekdays
          // 银行列表
          this.bankList = data.bank_list
          // url切换
          switch (Number(this.selected)) {
            case 1: // 我的活动
              this.url = '/vue/activity/my_list'
              this.page = 1
              this.showMeta = false
              this.ifAttention = true
              // 当前选中
              if (this.$route.query.myWeekday === undefined) {
                for (let i = 0; i < data.weekdays.length; i++) {
                  if (data.weekdays[i].text === '今天') {
                    this.myWeekday = data.weekdays[i].week
                  }
                }
              }
              this.$nextTick(() => {
                this.$refs.bankFilter.tabSelect(Number(this.myWeekday))
              })
              break
            case 2: // 待入活动
              this.url = '/vue/activity/other_list'
              this.page = 1
              this.showMeta = true
              this.ifAttention = false
              this.$nextTick(() => {
                this.$refs.bankFilter.tabSelect(Number(this.allWeekday))
              })
              break
          }
          this.getActList()
        })
      },
      getActList () {
        let params = {
          search_banks: this.searchBanks,
          options: this.options,
          act_type: this.actType,
          act_status: this.actStatus
        }
        switch (Number(this.selected)) {
          case 1: // 我的活动
            params.weekday = this.myWeekday
            break
          case 2: // 待入活动
            params.weekday = this.allWeekday
            break
        }
        this.actList = []
        this.$post(this.url, params).then(data => {
          this.actList = data.act_list
          this.subTab[0].badgeShow = false
          this.subTab[1].badgeShow = false
          if (data.if_my_red) {
            this.subTab[0].badgeShow = true
          }
          if (data.if_other_red) {
            this.subTab[1].badgeShow = true
          }
          // 顶部线报红点
          // this.$emit('reportRed', data.report_red)
          this.barList[0].badgeShow = data.report_red
          // 解析options
          let op = data.option_result
          for (let i in this.tags) {
            this.tags[i].cnt = Number(op[this.tags[i].val].cnt)
            this.tags[i].if_new = Number(op[this.tags[i].val].if_new)
          }
        })
      },
      routerToDetail (id) {
        this.$router.push({name: 'ActivityDetail', params: {id: id}})
      },
      proceedInfo (id, op, index, e) {
        e.cancelBubble = true
        let params = {act_id: id, op: op ? 'cancel' : 'complete'}
        this.$post('/vue/activity/update_cyc_finish', params).then(data => {
          if (op) {
            this.actList[index].if_cyc_finished = 0
            this.actList[index].if_act_finished = 0
          } else {
            this.actList[index].if_cyc_finished = 1
            this.actList[index].if_act_finished = 1
          }
        })
      },
      addManage (id, index) {
        let params = {act_id: id}
        this.$post('/vue/activity/add_to_manage', params).then(data => {
          this.actList.splice(index, 1)
        })
      },
      removeManage (id, index) {
        let params = {id: id}
        this.$post('/vue/activity/remove_manage', params).then(data => {
          this.actList.splice(index, 1)
        })
      },
      addHate (id, index, e) {
        e.cancelBubble = true
        MessageBox.confirm('确定删除此活动?').then(action => {
          if (action === 'confirm') {
            let params = {act_id: id}
            this.$post('/vue/activity/add_to_hate', params).then(data => {
              msg('删除成功')
              this.actList.splice(index, 1)
            })
          }
        })
      },
      scrolls (e) {
        if (this.$refs.actMenu.getBoundingClientRect().top <= 0) {
          this.menuFix = true
        } else {
          this.menuFix = false
        }
        this.windowScroll = document.documentElement.scrollTop
        // document.querySelector('.activity').scrollTop = e.target.scrollTop
      }
    },
    // 缓存
    activated () {
      // 监听
      window.addEventListener('scroll', this.scrolls)
      document.documentElement.scrollTop = this.windowScroll
      // this.$refs.turnTable.isCheck()
    },
    deactivated () {
      window.removeEventListener('scroll', this.scrolls)
    },
    mounted () {
      // 获取轮播图
      this.$post('/vue/carousel/get_list', {type: 2}).then(data => {
        this.image = data
      })
      // 获取抢兑活动
      this.getGrabAct()
      this.wechatShare({userShare: true})
      // 活动列表
      this.getTags()
      // 监听
      window.addEventListener('scroll', this.scrolls)
    },
    updated () {
      if (this.actList.length > 0) {
        this.wrapperHeight = this.winHeight - 158
      } else {
        this.wrapperHeight = this.winHeight - 414
      }
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-226: rgb(226, 226, 226);
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);

  .activity {
    // height: calc(~'100vh - 58px');
    padding-bottom: 58px;
    overflow-x: hidden;
    // overflow-y: scroll;
    // -webkit-overflow-scrolling: touch;
    * {
      outline: 0;
      -webkit-tap-highlight-color: transparent;
      -webkit-tap-highlight-color: transparent;
    }
    .page-part {
      .mint-navbar {
        color: @c-blue;
        font-size: 12px;
        background-color: #FFF;
        .mint-tab-item {
          &.is-selected {
            border-bottom: inherit;
            color: inherit;
            margin-bottom: inherit;
          }
        }
      }
    }
    .actvity-menu-bg {
      height: 98px;
    }
    .activity-menu {
      &.fixed {
        position: fixed;
        z-index: 1;
        top: 0;
      }
    }
    .sub-act-tab {
      font-size: 0;
      overflow: hidden;
      .mint-navbar {
        .mint-tab-item {
          padding: 12px 0;
          font-size: 15px;
          color: @c-blue;
          &.is-selected {
            border-bottom: 0;
            color: #FFF;
            margin-bottom: 0;
            background-color: @c-blue;
          }
          .mint-tab-item-label {
            font-size: 15px;
            line-height: 24px;
            
          }
          .mint-tab-item-icon {
            width: auto;
            height: auto; 
            .mint-badge {
              width: 8px;
              height: 8px;
              right: 28%;
              top: -3px;
            }
          }
        }
        &.mini-screen {
          display: inline-flex;
          vertical-align: middle;
          width: calc(~'100vw - 68px');
        }
      }
      .screen {
        display: inline-flex;
        vertical-align: middle;
        width: 68px;
        padding: 12px 12px 12px 5px;
        background-color: #FFF;
        border-left: 1px solid @c-226;
        box-sizing: border-box;
        text-align: center;
        img {
          width: 24px;
          height: 24px;
          vertical-align: middle;
        }
        span {
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
          vertical-align: middle;
        }
      }
      .mint-popup {
        width: 82vw;
        bottom: -50%;
      }
    }
    .slide-menu {
      font-size: 0;
      color: #a9a9a9;
      border-top: 1px solid #e2e2e2;
      border-bottom: 1px solid #e2e2e2;
      background-color: #FFF;
      display: flex;
      position: relative;
      .slide {
        overflow-x: scroll;
        display: inline-block;
        vertical-align: middle;
        flex: 77;
        margin-bottom: -1px;
        overflow-x: scroll;
        &::-webkit-scrollbar{ 
          width: 0; 
          height: 0;   
        }
        .scroll {
          white-space: nowrap;
          -webkit-overflow-scrolling: touch;
        }
        span {
          display: inline-block;
          width: calc(~'100vw / 6');
          font-size: 13px;
          line-height: 24px;
          padding: 12px 0;
          position: relative;
          /* &:first-child {
            width: 76px;
          } */
          &.on {
            border-bottom: 1px solid #6cb8de;
            color: #6cb8de;
          }
          &.badge::after {
            content: '';
            position: absolute;
            top: 12px;
            right: 0px;
            width: 8px;
            height: 8px;
            border-radius: 100%;
            background-color: rgb(255, 89, 22);
          }
        }
      }
      .fixed {
        width: 68px;
        padding: 12px 0px;
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        border-left: 1px solid #e2e2e2;
        flex: 17;
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          color: #7c7c7c;
          font-size: 13px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
      .mint-popup-right {
        width: 82vw;
        height: 100vh;
      }
    }
    /* ---抢兑提醒--- */
    .custom-remind {
      padding: 0 12px 12px;
      background: #FFF;
      font-size: 0;
      display: flex;
      .remind {
        display: inline-block;
        vertical-align: middle;
        padding: 0 12px;
        flex: 1;
        .title {
          font-size: 16px;
          line-height: 20px;
          color: #6cb8de;
        }
        .small-badge {
          display: inline-block;
          width: 37px;
          height: 16px;
          background: #d3f0ff;
          font-size: 12px;
          line-height: 16px;
          color: #286496;
          margin-right: 4px;
        }
        .desc {
          display: inline-block;
          font-size: 12px;
          line-height: 20px;
          color: #286496;
        }
      }
      .vertical-line {
        width: 1px;
        height: 44px;
        border-right: 1px solid #e2e2e2;
        display: inline-block;
        vertical-align: middle;
        flex: 0;
      }
      .report {
        display: inline-block;
        vertical-align: middle;
        flex: 2;
        text-align: left;
        padding: 0 16px;
        overflow: hidden;
        height: 44px;
        .move-up {
          position: relative;
          animation-name: moveUp;/* 选择器的 keyframe 名称 */
          animation-duration: 10s;/* 完成动画所花费的时间，以秒或毫秒计 */
          animation-timing-function: linear;/* 动画的速度曲线 linear 匀速 */
          animation-delay: 0;/* 开始之前的延迟 */
          animation-iteration-count: infinite;/* 播放的次数  infinite-无限次 */
          animation-direction: normal;/* 是否应该轮流反向播放动画 */
          bottom: -22px;
        }
        // @keyframes moveUp {
        //   from {bottom: 0px;}
        //   to {bottom: 120px;}
        // }
        .record {
          font-size: 0;
          margin-top: 8px;
          &:first-child {
            margin: 0;
          }
          .title {
            font-size: 12px;
            /* height: 16px; */
            line-height: 16px;
            padding: 0 2px;
            color: #a9a9a9;
            display: inline-block;
            vertical-align: middle;
            width: 63%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.border {
              box-sizing: border-box;
              border: 1px solid #e2e2e2;
              border-radius: 2px;
              margin-right: 8px;
              width: 30%;
              text-align: center;
            }
          }
        }
      }
    }
    .card-swipe {
      padding: 0 12px 12px;
      height: 88px;
      background-color: #FFF;
      .mint-swipe-items-wrap {
        border-radius: 8px;
      }
    }
    /* ---卡片样式--- */
    .activity-card {
      background: #FFF;
      text-align: left;
      position: relative;
      min-height: calc(~'100vh - 410px');
      .nothing {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 0;
        text-align: center;
        font-size: 12px;
        line-height: 24px;
        color: @c-124;
        a {
          color: @c-blue;
          text-decoration: underline;
        }
      }
      .card-item {
        margin-top: 8px;
        padding: 12px;
        position: relative;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
        &.is-new {
          background-image: url('/src/assets/icons/label-red.png');
          background-repeat: no-repeat;
          background-size: 24px 24px;
          background-position: left top;
        }
        .card-header {
          color: @c-124;
          font-size: 0;
          &::after {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 1px;
            content: '';
            transform: scaleY(.5);
            background-color: #f3f3f3;
          }
          img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
            vertical-align: middle;
          }
          .title {
            display: inline-block;
            vertical-align: middle;
            font-weight: bold;
            font-size: 13px;
            line-height: 24px;
          }
          .v-line {
            width: 1px;
            height: 20px;
            background-color: @c-226;
            display: inline-block;
            vertical-align: middle;
            margin: 0 8px;
          }
        }
        .card-content {
          padding: 8px 0;
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
          border-bottom: 1px solid @c-235;
          .desc {}
          .hint {
            color: rgb(217, 117, 99);
          }
        }
        .card-footer {
          padding-top: 8px;
          display: flex;
          align-items: center;
          align-content: flex-start;
          justify-content: space-between;
          font-size: 0;
          &::before {
            &:extend(.activity .activity-card .card-item .card-header::after);
          }
          .flex-item {
            flex: 0 0 auto;
          }
          img {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
          }
          span {
            font-size: 12px;
            line-height: 24px;
            color: @c-169;
            display: inline-block;
            vertical-align: middle;
          }
          .ml-12 {
            margin-left: 12px;
          }
        }
      }
    }
    .line {
      height: 8px;
    }
  }
</style>